<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="always">
					<div class="main_area">
						<div class="search_area" ref="search_area" v-if="searchVisible">
						</div>
						<div class="action_area" ref="action_area">
							<vxe-toolbar 
								ref="xToolbar"
								:size="formSize"
								:print = "checkPermission('/Admin/Dept/simplePrint.html') ? true : false"
								:custom="custom"
								:refresh="{ query: index }">
								<template #buttons>
									<div style="display: flex;align-items: baseline;margin-top: 3px;flex-wrap: wrap;">
										<el-button type="danger" :size="formSize" icon="el-icon-back" @click="returnJump" v-if="$route.query.is_jump_url">返回</el-button>
										<el-button  type="success"   :size="formSize"  icon="el-icon-plus"  @click="add(ids)"  v-if="checkPermission('/Admin/Dept/add.html')" >添加</el-button>
										<el-button  type="primary" :disabled="single"  :size="formSize"  icon="el-icon-edit"  @click="update(ids)"  v-if="checkPermission('/Admin/Dept/update.html')" >修改</el-button>
										<el-button  type="danger" :disabled="single"  :size="formSize"  icon="el-icon-delete"  @click="del(ids)"  v-if="checkPermission('/Admin/Dept/delete.html')" >删除</el-button>
										<el-button  type="info" :disabled="single"  :size="formSize"  icon="el-icon-view"  @click="detail(ids)"  v-if="checkPermission('/Admin/Dept/detail.html')" >查看详情</el-button>
									</div>
								</template>
								<template #tools>
									<div style="display: flex;align-items: baseline;margin-top: 3px;">
									</div>
								</template>
							</vxe-toolbar>
						</div>
						<div :class="tableClass" ref="table_area">
							<vxe-table ref="xTable" id="xTableadmin_dept1698766923" border height="100%" :data="list" :loading="loading" :size="formSize"
								:keyboard-config="keyboardConfig" :custom-config="customConfig" :column-config="columnConfig"
								:row-config="rowConfig" :edit-config="editConfig" :tree-config="treeConfig" :print-config="printConfig"
								:radio-config="radioConfig" @radio-change="radioChange">
								<template>
									<vxe-column :show-overflow="false" type="radio" width="40"></vxe-column>
									<!-- 编号 -->
									<vxe-column field="dept_id" title= "编号" :visible="false" min-width="80" width="70" show-overflow>
										<template #default="{ row }">
											<span>{{row.dept_id}}</span> 
										</template>
									</vxe-column>
									<!-- 名称 -->
									<vxe-column field="name" title= "名称" align="left" :visible="true" min-width="80" tree-node show-overflow>
										<template #default="{ row }">
											<span>{{row.name}}</span> 
										</template>
									</vxe-column>
									<!-- 说明 -->
									<vxe-column field="note" title= "说明" align="left" :visible="true" min-width="80" show-overflow>
										<template #default="{ row }">
											<span>{{row.note}}</span> 
										</template>
									</vxe-column>
									<!-- 排序 -->
									<vxe-column field="sort_id" title= "排序" :visible="false" min-width="80" width="70" :edit-render="{enabled: updateExtPermission}" show-overflow>
										<template #default="{ row }">
											<el-input :readonly="!updateExtPermission" @blur.stop="updateExt(row,'sort_id')"  :size="formSize" placeholder="排序" v-model="row.sort_id"></el-input>
										</template>
									</vxe-column>
									<!-- 状态 -->
									<vxe-column field="status" title= "状态" :visible="false" min-width="80" width="70" show-overflow>
										<template #default="{ row }">
											<el-tag type="primary" v-if="row.status == '1'" size="mini" effect="dark">开启</el-tag>
											<el-tag type="danger" v-if="row.status == '0'" size="mini" effect="dark">关闭</el-tag>
										</template>
										<template #edit="{ row }">
											<el-switch @change="updateExt(row,'status')" :active-value="1" :inactive-value="0" v-model="row.status"></el-switch>
										</template>
									</vxe-column>
									<!-- 创建时间 -->
									<vxe-column field="create_time" title= "创建时间" :visible="false" min-width="80" width="200" show-overflow>
										<template #default="{ row }">
											{{$XEUtils.toDateString(row.create_time,'yyyy-MM-dd HH:mm:ss')}}
										</template>
									</vxe-column>
									<!-- 更新时间 -->
									<vxe-column field="update_time" title= "更新时间" :visible="false" min-width="80" width="200" show-overflow>
										<template #default="{ row }">
											{{$XEUtils.toDateString(row.update_time,'yyyy-MM-dd HH:mm:ss')}}
										</template>
									</vxe-column>
									<!-- 操作 -->
									<vxe-column title="操作"  align="center" width="200" :fixed="$store.getters.device !== 'mobile' ? 'right' : ''">
										<template #default="{ row }">
											<div v-if="row.dept_id">
												<el-button :size="formSize" type="primary" @click="update(row)" v-if="checkPermission('/Admin/Dept/update.html')"><i class="el-icon-edit" />修改</el-button>
												<el-button :size="formSize" type="danger" @click="del(row)" v-if="checkPermission('/Admin/Dept/delete.html')"><i class="el-icon-delete" />删除</el-button>
											</div>
										</template>
									</vxe-column>
								</template>
							</vxe-table>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--添加-->
		<Add  :show.sync="dialog.addDialogStatus" :size="formSize" @refesh_list="index"></Add>

		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" :size="formSize" @refesh_list="index"></Update>

		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" :size="formSize" @refesh_list="index"></Detail>

	</div>
</template>
<script>
	import {
		getFieldList,
		index,
		updateExt,
		getUpdateInfo,
		del,
	} from '@/api/admin/admin/dept'
	import mixinVexTable from "@/mixin/vxeTable"
	import Search from '@/components/common/VxeSearch.vue'
	import Add from '@/views/admin/admin/dept/add.vue'
	import Update from '@/views/admin/admin/dept/update.vue'
	import Detail from '@/views/admin/admin/dept/detail.vue'
	export default {
		name:'admin_dept',
		components: { Search,Add,Update,Detail,		},
		mixins: [mixinVexTable],
		data(){
			return {
			sqlFieldList:[],
				dialog: {
					addDialogStatus : false,
					updateDialogStatus : false,
					detailDialogStatus : false,
				},
				updateInfo:{},
				detailInfo:{},
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:false,
				searchForm:[],
				searchData:{},
				// 表格配置
				updateExtPermission: false,
				keyboardConfig: {
					isArrow: true,
				},
				customConfig: {
					storage: true,
				},
				columnConfig: {
					isCurrent: true,
					isHover: true,
					resizable: true,
				},
				rowConfig: {
					keyField: 'dept_id',
					isCurrent: true,
					isHover: true,
				},
				editConfig: {
					enabled: false,
					trigger: 'dblclick',
					mode: 'cell',
				},
				treeConfig: {
					rowField: 'dept_id',
					parentField: 'pid',
					trigger: 'cell',
					// expandAll: true,
					accordion: true, // 手风琴样式，一次只有一个类别展开
				},
				radioConfig: {
					trigger: 'row'
				},
				printConfig: {
					style: `
						// 打印样式
						.vxe-table {
							color: #000000; // 修改表格默认颜色
							font-size: 12px; // 修改表格默认字体大小
							font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体
						}
						.vxe-table,
						.vxe-table thead th,
						.vxe-table tbody td,
						.vxe-table tfoot td  {
							white-space: nowrap; // 表格宽度自适应
							border-color: #000000; // 修改表格边框颜色
						}
						.vxe-table thead th {
							color: green; // 修改表头字体颜色
							font-size: 14px; // 修改表头默认字体大小
						}
						.vxe-table tfoot td {
							color: red; // 修改表尾字体颜色
						}
						`,
				},
				listPid:[],
				listStatus:[],
			}
		},
		watch: {
			page_data: {
				deep: true, immediate: false,
				handler: function (val){
					this.keepPager('admin_dept', {limit: val.limit,page: val.page,})
				},
			}
		},
		activated(){
			this.index()
			if(this.checkPermission('/Admin/Dept/update.html')){
				this.editConfig.enabled = true
				this.updateExtPermission = true
			}
			if(this.checkPermission('/Admin/Dept/updateExt.html')){
				this.updateExtPermission = true
			}
		},
		mounted(){
			// 缓存分页参数
			let pageStatus = JSON.parse(localStorage.getItem('pager_status'));
			Object.assign(this.page_data, pageStatus != null ? pageStatus['admin_dept'] : {})
			// 重新计算表格高度
			this.$nextTick(() => {
				var actionHeight = this.$refs.action_area.offsetHeight
				var height = document.body.offsetHeight - this.headerHeight - this.tagHeight - actionHeight - 65
				this.$refs.table_area.style.height = height + 'px';
			});
			getFieldList().then(res=>{
				this.sqlFieldList = res.data
			})
		},
		methods: {
			// 选中行
			radioChange({ row }){
				// 主键的数组
				this.ids = [row.dept_id]
				// 当前选中的对象
				this.selectRow = row
				// 是否是单选
				this.single = this.ids.length != 1
				// 是否是多选
				this.multiple = false
			},
			index(){
				let param = {limit:999999,page:this.page_data.page}
				Object.assign(param, this.searchData,this.$MyUtils.param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.page_data.total = res.data.total
					this.loading = false
					// 下拉框，复选框的选项数据
					this.listPid = this.sqlFieldList.pids,
					this.listStatus = [{"label":"开启","value":"1"},{"label":"关闭","value":"0"}]
					this.$nextTick(() => this.$refs.xTable.setAllTreeExpand(true));
				})
			},
			// 排序修改方法
			updateExt(row,field){
				if(row.dept_id){
					updateExt({dept_id:row.dept_id,[field]:row[field]}).then(res => {
						this.$message({message: '操作成功', type: 'success'})
						this.index()
					})
				}
			},
			add(){
				this.dialog.addDialogStatus = true
			},
			update(row){
				let id = row.dept_id ? row.dept_id : this.ids.join(',')
				getUpdateInfo({dept_id:id}).then(res => {
					if(res.status == 200){
						this.dialog.updateDialogStatus = true
						this.updateInfo = res.data
					}
				})
			},
			del(row){
				this.$MyUtils.confirm({content:'确定要操作吗'}).then(() => {
					let ids = row.dept_id ? row.dept_id : this.ids.join(',')
					del({dept_id:ids}).then(res => {
						this.$message({message: res.msg, type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {dept_id:row.dept_id ? row.dept_id : this.ids.join(',')}
			},
			// 返回按钮
			returnJump() {
				Object.assign(this.tagsLocal,this.$route)
				this.$store.dispatch('deletetag',this.tagsLocal)
				this.$router.push({
					path: this.$route.query.url,
				})
			},
			toggleRowExpansion(){
				this.expand = !this.expand
				this.list.forEach(item=>{
					this.$refs.multipleTable.toggleRowExpansion(item,this.expand)
				})
			},
		},
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>